<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- 必须注明版本 -->
  <link rel="stylesheet" href="../bower_components/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles/bootstrap.css">
</head>
<body style="background-color:#057748;">

  <div class="container">
    <h1>面包屑导航</h1>
    <ol class="breadcrumb">
      <li><a href="">2015</a></li>
      <li><a href="">OCT</a></li>
      <li class="active">15TH</a></li>
    </ol>
  </div>

  <div class="container">
    <h1>分页器</h1>
    <ul class="pagination">
      <li><a href="">&lt;</a></li>
      <li class="active"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li class="disabled"><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><a href="">&gt;</a></li>
    </ul>
  </div>

  <div class="container">
    <h1>分页器大小</h1>
    <ul class="pagination pagination-lg">
      <li><a href="">&lt;</a></li>
      <li class="active"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li class="disabled"><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><a href="">&gt;</a></li>
    </ul>
    <ul class="pagination pagination">
      <li><a href="">&lt;</a></li>
      <li class="active"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li class="disabled"><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><a href="">&gt;</a></li>
    </ul>
    <ul class="pagination pagination-sm">
      <li><a href="">&lt;</a></li>
      <li class="active"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li class="disabled"><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><a href="">&gt;</a></li>
    </ul>
    <!-- 没有xs -->
    <ul class="pagination pagination-xs">
      <li><a href="">&lt;</a></li>
      <li class="active"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li class="disabled"><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><a href="">&gt;</a></li>
    </ul>         
  </div>

  <div class="container">
    <h1>翻页</h1>
    <ul class="pager">
      <li class="previous"><a href="">previous</a></li>
      <li class="next"><a href="">next</a></li>
    </ul>
  </div>

  <div class="container">
    <h1>标签</h1>
    <p>
      <span class="label label-default">默认标签</span>
      <span class="label label-primary">基础标签</span>
      <span class="label label-success">成功标签</span>
      <span class="label label-info">信息标签</span>
      <span class="label label-warning">警告标签</span>
      <span class="label label-danger">危险标签</span>
    </p>
  </div>

  <div class="container">
    <h1>徽章</h1>
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="">首页<span class="badge">24</span></a>
      </li>
      <li>
        <a href="">好友</a>
      </li>
      <li>
        <a href="">最新消息<span class="badge">8</span></a>
      </li>
    </ul>
  </div>

  <div class="jumbotron">
    <div class="container">
      <h1>欢迎登陆！</h1>
      <p>这是一个超大屏幕（Jumbotron）的实例。</p>
      <p><a href="" class="btn btn-primary btn-lg">进入学习</a></p>
    </div>
  </div>

  <div class="container">
    <div class="jumbotron">
      <h1>欢迎登陆！</h1>
      <p>这是一个超大屏幕（Jumbotron）的实例。</p>
      <p><a href="" class="btn btn-primary btn-lg">进入学习</a></p>
    </div>
  </div>  

  <div class="container">
    <h1>缩略图</h1>
    <div class="row">
      <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
          <img src="images/a.jpg" alt="">
          <div class="caption">
            <h3>缩略图标签</h3>
            <p>文本本文文本</p>
            <p>
              <button class="btn btn-primary">点赞</button>
              <button class="btn btn-success">收藏</button>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
          <img src="images/a.jpg" alt="">
          <div class="caption">
            <h3>缩略图标签</h3>
            <p>文本本文文本</p>
            <p>
              <button class="btn btn-primary">点赞</button>
              <button class="btn btn-success">收藏</button>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
          <img src="images/a.jpg" alt="">
          <div class="caption">
            <h3>缩略图标签</h3>
            <p>文本本文文本</p>
            <p>
              <button class="btn btn-primary">点赞</button>
              <button class="btn btn-success">收藏</button>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
          <img src="images/a.jpg" alt="">
          <div class="caption">
            <h3>缩略图标签</h3>
            <p>文本本文文本</p>
            <p>
              <button class="btn btn-primary">点赞</button>
              <button class="btn btn-success">收藏</button>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <h1>警告框</h1>
    <div class="alert alert-success alert-dismissable">
      <a href="" class="alert-link">成功！很好地完成了提交。</a>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    </div>
    <div class="alert alert-info alert-dismissable">
      <a href="" class="alert-link">信息！请注意这个信息。</a>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    </div>
    <div class="alert alert-warning alert-dismissable">
      <a href="" class="alert-link">警告！请不要提交。</a>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    </div>
    <div class="alert alert-danger alert-dismissable">
      <a href="" class="alert-link">错误！请进行一些更改。</a>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    </div>
  </div>
  
  <div class="container">
    <h1>进度条</h1>
    <div class="progress">
      <div class="progress-bar progress-bar-success" style="width:90%;"></div>
      <span class="sr-only">90%</span>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-info" style="width:70%;"></div>
      <span class="sr-only">70%</span>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-warning" style="width:50%;"></div>
      <span class="sr-only">50%</span>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-danger" style="width:30%;"></div>
      <span class="sr-only">30%</span>
    </div>            
  </div>

  <div class="container">
    <h1>条纹进度条</h1>
    <div class="progress progress-striped">
      <div class="progress-bar progress-bar-success" style="width:90%;"></div>
      <span class="sr-only">90%</span>
    </div>
    <div class="progress progress-striped">
      <div class="progress-bar progress-bar-info" style="width:70%;"></div>
      <span class="sr-only">70%</span>
    </div>
    <div class="progress progress-striped">
      <div class="progress-bar progress-bar-warning" style="width:50%;"></div>
      <span class="sr-only">50%</span>
    </div>
    <div class="progress progress-striped">
      <div class="progress-bar progress-bar-danger" style="width:30%;"></div>
      <span class="sr-only">30%</span>
    </div>            
  </div>

  <div class="container">
    <h1>动画进度条</h1>
    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-success" style="width:90%;"></div>
      <span class="sr-only">90%</span>
    </div>
    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-info" style="width:70%;"></div>
      <span class="sr-only">70%</span>
    </div>
    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-warning" style="width:50%;"></div>
      <span class="sr-only">50%</span>
    </div>
    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-danger" style="width:30%;"></div>
      <span class="sr-only">30%</span>
    </div>            
  </div>  

  <div class="container">
    <h1>堆叠进度条</h1>
    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-info" style="width:40%;"></div>
      <span class="sr-only">40%</span>
      <div class="progress-bar progress-bar-warning" style="width:30%;"></div>
      <span class="sr-only">30%</span>
      <div class="progress-bar progress-bar-danger" style="width:30%;"></div>
      <span class="sr-only">30%</span>
    </div>
  </div>

  <div class="container">
    <h1>多媒体</h1>
    <ul class="media-list">
      <li class="media">
        <a class="pull-left" href="">
          <img class="media-object" src="images/a.jpg" style="width:30px;">
        </a>
        <div class="media-body">
          <h4 class="media-heading">媒体标题</h4>
          <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
        </div>
      </li>
      <li class="media">
        <a class="pull-left" href="">
          <img class="media-object" src="images/a.jpg" style="width:30px;">
        </a>
        <div class="media-body">
          <h4 class="media-heading">媒体标题</h4>
          <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
          <!-- 嵌套的媒体对象 -->
          <div class="media">
            <a class="pull-left" href="">
              <img class="media-object" src="images/a.jpg" style="width:30px;">
            </a>
            <div class="media-body">
              <h4 class="media-heading">媒体标题</h4>
              <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
              <!-- 嵌套的媒体对象 -->
            </div>
          </div>          
        </div>
      </li>
    </ul>
  </div>

  <div class="container">
    <h1>列表组</h1>
    <ul class="list-group">
      <li class="list-group-item">
        <a href="">list1</a>
        <span class="badge">8</span>
      </li>
      <li class="list-group-item">
        <a href="">list2</a>
      </li>
      <li class="list-group-item">
        <a href="">list3</a>
        <span class="badge">24</span>
      </li>
      <li class="list-group-item">
        <a href="">list4</a>
      </li>            
    </ul>
  </div>

  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">带有 title 的面板标题</h3>
      </div>
      <div class="panel-body">面板内容</div>
      <div class="panel-footer">面板脚注</div>
    </div>
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">带有 title 的面板标题</h3>
      </div>
      <div class="panel-body">面板内容</div>
      <div class="panel-footer">面板脚注</div>
    </div>
    <div class="panel panel-danger">
      <div class="panel-heading">
        <h3 class="panel-title">带有 title 的面板标题</h3>
      </div>
      <div class="panel-body">面板内容</div>
      <div class="panel-footer">面板脚注</div>
    </div>
    <div class="panel panel-danger">
      <div class="panel-heading">
        <h3 class="panel-title">带有 title 的面板标题</h3>
      </div>
      <div class="panel-body">
        <h3>面板内容</h3>
        <table class="table">
          <tr>
            <th>city</th>
            <th>team</th>
          </tr>
          <tr>
            <td>los angeles</td>
            <td>lakers</td>
          </tr>
          <tr>
            <td>chicago</td>
            <td>bulls</td>
          </tr>
        </table>
      </div>
      <div class="panel-footer">面板脚注</div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">带有 title 的面板标题</h3>
      </div>
      <div class="panel-body">
        <h3>面板内容</h3>
        <ul class="list-group">
          <li class="list-group-item">
            <a href="">list1</a>
            <span class="badge">8</span>
          </li>
          <li class="list-group-item">
            <a href="">list2</a>
          </li>
          <li class="list-group-item">
            <a href="">list3</a>
            <span class="badge">24</span>
          </li>
          <li class="list-group-item">
            <a href="">list4</a>
          </li>            
        </ul>
      </div>
      <div class="panel-footer">面板脚注</div>
    </div>                    
  </div>

  <div class="container">
    <h1>toggle</h1>
    <ul class="list-group" id="list-group">
      <li class="list-group-item">
        <a href="">list1</a>
        <span class="badge">8</span>
      </li>
      <li class="list-group-item">
        <a href="">list2</a>
      </li>
      <li class="list-group-item">
        <a href="">list3</a>
        <span class="badge">24</span>
      </li>
      <li class="list-group-item">
        <a href="">list4</a>
      </li>            
    </ul>
    <button class="btn btn-primary btn-sm" id="js-toggle">click me</button>
  </div>

  <!-- 必须注明版本 -->
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <!-- 必须注明版本 -->
  <script src="../bower_components/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <script>
    $(function(){
      $('#js-toggle').on('click',function(){
        $('#list-group').slideToggle();
      })
    });
  </script>
</body>
</html>